<template>
	<view>
		<view style="padding-top: 3vh;padding-left: 10vw">
			<l-echart ref="chart"></l-echart>
		</view>
	</view>
</template>

<script>
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	export default {
		props: {
			pieData: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		watch: {
			pieData: {
				handler(val) {
					this.option = {
						tooltip: {
							trigger: 'item'
						},
						series: [{
							name: 'Access From',
							type: 'pie',
							radius: ['60%', '85%'],
							center: ['50%', '50%'],
							avoidLabelOverlap: false,
							label: {
								show: false,
								position: 'center'
							},
							labelLine: {
								show: false
							},
							data: val
						}]
					};
					this.$nextTick(() => {
						this.init();
					})

				},
				immediate: true,
				deep: true,
			}
		},
		data() {
			return {
				showTip: false,
				position: [],
				params: [],
				option: {}
			}
		},
		methods: {
			init() {
				this.$refs.chart.init(echarts, chart => {
					chart.resize({
						width: 280,
						height: 280
					});
					chart.setOption(this.option);

					// 监听tooltip显示事件
					chart.on('showTip', (params) => {
						this.showTip = true
					});
					chart.on('hideTip', (params) => {
						setTimeout(() => {
							this.showTip = false
						}, 300)
					});

				});
			},
			save() {
				this.$refs.chart.canvasToTempFilePath({
					success(res) {
						console.log('res::::', res)
					}
				})
			}
		}
	}
</script>
<style>

</style>